<template>
  <HeaderBar :title="$t('login.passwordTitle')"  />
  <view class="password-container main-container">
     <view class="form-container">
        <view class="item">
           <view class="icon">
              <wd-icon name="lock-on" size="40rpx" color="#969799"></wd-icon>
           </view>
           <view class="name">{{$t('login.oldPwd')}}</view>
           <view class="input">
              <wd-input v-model="state.oldPwd" :placeholder="$t('login.verifyOldPwd')"
              placeholderStyle="font-size:28rpx" show-password no-border clearable  />
           </view>
        </view>
        <view class="item">
           <view class="icon">
              <wd-icon name="lock-on" size="40rpx" color="#969799"></wd-icon>
           </view>
           <view class="name">{{$t('login.newPwd')}}</view>
           <view class="input">
              <wd-input v-model="state.newPwd" :placeholder="$t('login.verifyNewPwd')"
              placeholderStyle="font-size:28rpx" show-password no-border clearable  />
           </view>
        </view>
        <view class="item">
           <view class="icon">
              <wd-icon name="lock-on" size="40rpx" color="#969799"></wd-icon>
           </view>
           <view class="name">{{$t('login.confirmNewPwd')}}</view>
           <view class="input">
              <wd-input v-model="state.confirmPwd" :placeholder="$t('login.verifyConfirmNewPwd')"
              placeholderStyle="font-size:28rpx" show-password no-border clearable  />
           </view>
        </view>
     </view>
     <view class="form-btns" @click="onSubmit">{{$t('login.confirm')}}</view>
     <view class="tips">>{{$t('login.forgotPwd')}} <view class="service" @click="openService">{{$t('login.service')}}</view></view>
  </view>

  <uni-popup ref="serviceRef">
     <Service @onClose="onClose" />
  </uni-popup>
  
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import Service from '@/components/Service/index';
import HeaderBar from '@/components/HeaderBar';
import { toLang } from '@/utils/lang';
import {NavigateTo, showToast, getStorage} from '@/utils/common';
import { updateUserPassword } from '@/api/login';
const serviceRef = ref(null) as any;

const state = reactive({
  oldPwd: '',
  newPwd:'',
  confirmPwd: ''
});


//开客服弹窗
const openService = () => {
  serviceRef.value.open('center');
};

//关闭服弹窗
const onClose = () => {
  serviceRef.value.close();
};

//提交
const onSubmit = async() => {
  if (!state.oldPwd) {
    showToast({ title: toLang('login.verifyOldPwd')});
    return;
  }
  if (!state.newPwd) {
    showToast({ title: toLang('login.verifyNewPwd')});
    return;
  }
  if (!state.confirmPwd || state.confirmPwd !== state.newPwd) {
    showToast({ title: toLang('login.verifyRepeatPwd') });
    return;
  }
  const params={...state,phoneNo:getStorage('user').phoneNo}
  const res = await updateUserPassword(params);
  if(res.code !== 200){
    return;
  }
  showToast({title:toLang('common.success')});
  NavigateTo('/pages/home/index');

}






</script>

<style lang="scss" scoped>
.password-container {
  padding:0 30rpx;
  .form-container{
    .item{
      display: flex;
      align-items: center;
      padding:40rpx 0;
      border-bottom: 1rpx solid #ebedf0;
      .icon{
        width: 44rpx;
      }
      .name{
        width:160rpx;
        font-size: 28rpx;
        overflow-wrap: break-word;
        line-height: 50rpx; 
      }
      .input{
        flex: 1;
      }
    }
  }
  .form-btns{
    margin:60rpx 0 40rpx;
    background: linear-gradient(135deg, #1989fa, #39b9f9);
    box-shadow: 0 1.06667vw 3.2vw #1989fa33;
  }
  .tips{
    display: flex;
    justify-content: center;
    font-size: 24rpx;
    color: #969799;
    .service{
      color: #1989fa;
      font-size:26rpx;
       cursor: pointer;
       margin-left: 10rpx;
    }
  }
}
</style>
